<template>
  <div v-loading="$store.state.app.loadingFull||loading" element-loading-background="rgba(0, 0, 0, 0.4)" class="login_container" :style="{ backgroundImage: 'url(' + backGroundUrl + ')' }">
    <div class="top" :style="{ backgroundImage: 'url(' + headerUrl + ')' }">
      <div class="jlinkLogo" :style="{ backgroundImage: 'url(' + jlinkLogo + ')' }" />
    </div>
    <div class="main">
      <div class="left">
        <div class="left_item" :style="{ backgroundImage: 'url(' + leftBackground + ')' }" />
      </div>
      <div class="right" :style="{ backgroundImage: 'url(' + rightBackground + ')' }">
        <div class="formContent" :style="{ backgroundImage: 'url(' + loginFormBackground + ')' }">
          <div class="item" style="">
            <div class="item1" style="">数字工厂</div>
            <div class="item2" style="">Digital Factory</div>
            <div class="item3" style="">公司编码</div>
            <div class="item4" style="">
              <el-input v-model="loginForm.companyCode" placeholder="请输入公司编码" @keyup.enter.native="handleLogin" />
            </div>
            <div class="item5" style="">用户名</div>
            <div class="item6" style="">
              <el-input v-model="loginForm.username" placeholder="请输入用户名" @keyup.enter.native="handleLogin" />
            </div>
            <div class="item5" style="">密码</div>
            <div class="item6" style="">
              <el-input v-model="loginForm.password" placeholder="请输入密码" show-password @keyup.enter.native="handleLogin" />
            </div>
            <div class="item7" style="">
              <el-button
                class="item7_button"
                style=""
                :style="{ backgroundImage: 'url(' + buttonBackground + ')' }"
                @click.native="handleLogin"
              >登录</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer_padding">
        <div class="left">
          <a class="item1" href="http://www.cascadeiot.com/">关于极联</a>
          <div class="item2">&nbsp;&nbsp;|&nbsp;&nbsp;</div>
          <a class="item3" href="http://www.cascadeiot.com/contact">联系我们</a>
        </div>
        <div class="right">
          无锡极联网络科技有限公司 版权所有 ｜ E-mail：liwan@cascadeiot.com 电话：18352525903 地址：江苏省无锡市新吴区中国传感网国际创新园E2-518
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const backGround_url = require('@/assets/images/login_background.png')
const header_url = require('@/assets/images/header_background.png')
const jlinkLogo = require('@/assets/images/jlinkLogo.png')
const loginFormBackground_url = require('@/assets/images/loginForm_background.png')
const login_right_Background = require('@/assets/images/login_right_Background.png')
const login_left_Background = require('@/assets/images/login_left_Background.png')
const login_button_Background = require('@/assets/images/login_button_Background.png')
export default {
  name: 'Login',
  beforeRouteEnter(to, from, next) {
    if (from.name || typeof (from.name) == 'undefined') {
      console.log('Login Reload ...')
    }
    next()
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error('公司编码不能为空'))
      } else {
        callback()
      }
    }
    const validateCompanyCode = (rule, value, callback) => {
      if (value.length <= 0 && value !== 'superadmin') {
        callback(new Error('公司编码不能为空'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error(this.$t('login.passwordNotNull')))
      } else {
        callback()
      }
    }
    const validateVerifyCode = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error(this.$t('login.verifyCodeNotNull')))
      } else {
        callback()
      }
    }
    return {
      headerUrl: header_url,
      backGroundUrl: backGround_url,
      jlinkLogo: jlinkLogo,
      loginFormBackground: loginFormBackground_url,
      rightBackground: login_right_Background,
      leftBackground: login_left_Background,
      buttonBackground: login_button_Background,
      verifyCode: '',
      loginForm: {
        companyCode: '',
        username: '',
        password: '',
        verifyCode: ''
      },
      loginRules: {
        companyCode: [{
          required: true,
          trigger: 'change',
          validator: validateCompanyCode
        }],
        username: [{
          required: true,
          trigger: 'change',
          validator: validateUsername
        }],
        password: [{
          required: true,
          trigger: 'change',
          validator: validatePassword
        }],
        verifyCode: [{
          required: true,
          trigger: 'change',
          validator: validateVerifyCode
        }]
      },
      passwordType: 'password',
      capsTooltip: false,
      loading: false,
      showDialog: false,
      redirect: undefined,
      otherQuery: {},
      isReload: false
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  mounted() {
    // if (this.loginForm.username == '') {
    //   this.$refs.username.focus()
    // } else if (this.loginForm.password == '') {
    //   this.$refs.password.focus()
    // }

    // const code = this.$refs.code
    // code.addEventListener('click', function(event) {
    //   code.src = 'common/getVerifyCode?' + Math.random()
    // })
    // code.addEventListener('mousemove', function(event) {
    //   code.style.cursor = 'pointer'
    // })
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    register() {
      this.$router.push('/register')
    },
    checkCapslock({
      shiftKey,
      key
    } = {}) {
      if (key && key.length == 1) {
        if (shiftKey && (key >= 'a' && key <= 'z') || !shiftKey && (key >= 'A' && key <= 'Z')) {
          this.capsTooltip = true
        } else {
          this.capsTooltip = false
        }
      }
      if (key == 'CapsLock' && this.capsTooltip == true) {
        this.capsTooltip = false
      }
    },
    showPwd() {
      if (this.passwordType == 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    checkForm() {
      if (!this.loginForm.companyCode && this.loginForm.username !== 'superadmin') {
        this.$message({
          message: '请输入公司编码',
          type: 'warning'
        })
        return false
      }
      if (!this.loginForm.username) {
        this.$message({
          message: '请输入用户名',
          type: 'warning'
        })
        return false
      }
      if (!this.loginForm.password) {
        this.$message({
          message: '请输入密码',
          type: 'warning'
        })
        return false
      }
      return true
    },
    handleLogin() {
      if (this.checkForm()) {
        this.loading = true
        const cacheLoginForm = this.$deepClone(this.loginForm)
        delete cacheLoginForm['companyCode']
        if (this.loginForm.username !== 'superadmin') {
          cacheLoginForm.username = this.loginForm.companyCode.trim() + this.loginForm.username.trim()
        }
        this.$store.dispatch('user/login', cacheLoginForm)
          .then(() => {
            this.$router.push({
              // path: this.redirect || '/homePage',
              path: this.redirect || '/',
              query: this.otherQuery
            })
          }).finally(() => {
            this.loading = false
          })
      }
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style lang="less" scoped>

.login_container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #333333;
  .top{
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    .jlinkLogo{
      width: 200px;
      height: 50px;
      background-repeat: no-repeat;
      background-position: center;
      float: right;
      margin-right: 60px;
    }
  }
  .main{
    width: 100%;
    height: calc(100% - 90px);
    display: flex;
    .left{
      flex: 1;
      height: 100%;
      display: flex;align-items: center;justify-content: flex-end;
      .left_item{
        width: 572px;height: 484px;
        background-repeat: no-repeat;
        background-position: center;background-size: 100% 100%
      }
    }
    .right{
      width: 50%;
      height: 100%;
      display: flex;align-items: center;
      background-repeat: no-repeat;
      background-position: right -165px  bottom 0px;
      padding-left: 50px;

      .formContent{
        width: 550px;height: 610px;
        background-repeat: no-repeat;
        background-position: center;
        .item{
          width: calc(100% - 200px);height: 100%;margin-left: 100px;margin-right: 100px
        }
        .item1{
          margin-top: 18%;font-size: 28px
        }
        .item2{
          margin-top: 5%;font-size: 20px;color: #666666
        }
        .item3{
          margin-top: 7%;font-size: 16px;
        }
        .item4{
          margin-top: 3%;font-size: 16px;border-bottom: 1px solid #333333
        }
        .item5{
          margin-top: 7%;font-size: 16px;
        }
        .item6{
          margin-top: 3%;;font-size: 16px;border-bottom: 1px solid #333333
        }
        .item7{
          margin-top: 15%;font-size: 20px;height: 75px;
          .item7_button{
            width: 100%;height: 100%;border: 0px;color: white;background-color: inherit;
            background-repeat: no-repeat;background-position: center;background-size: 100%;
            letter-spacing: 10px;
          }
        }
      }
    }
  }

  .footer{
    width: 100%;
    height: 40px;
    display: flex;align-items: center;
    background-color: #333333;
    font-size: 10px;
    .footer_padding{
      width: 100%;
      height: 100%;
      padding-left: 20px;
      padding-right: 20px;
      color: #999999;
      display: flex;align-items: center;
    }
    .left{
      width: 40%;
      display: flex;
      .item1{

      }
      .item2{
      }
      .item3{
      }
    }
    .right{
      flex: 1;
      display: flex;justify-content: flex-end;
    }
  }
}
</style>

